<template>
	    <div class="mealrefund_confirm" v-if="parentData.student">
	    	
	    	<el-dialog 	
			 class="mealfeeconfigDialog"
			:visible.sync="parentData.show"
			:close-on-click-modal="parentData.modalclose"
			:modal="false"
			:before-close="closeDialog"
			element-loading-background="rgba(0, 0, 0, 0.1)"
			custom-class="mealfeeconfigrefund"
			>
				<div class="title">退费</div>
				<div class="student-info">
					<el-row>
						<el-col :span="6"><span>学员姓名：</span><span>{{parentData.student.realName}}</span></el-col>
						<el-col :span="6"><span>联系人：</span><span>{{parentData.parentObj.parentName}}</span></el-col>
						<el-col :span="6"><span>联系电话：</span><span>{{parentData.parentObj.phone}}</span></el-col>
						<el-col :span="6"></el-col>
					</el-row>
				</div>
				<div class="content-box">
					<section>					
						<div class="meallist-box">
							<div class="tablecss">
			              		<table   border="0" style="width:100%;" cellpadding="0" cellspacing="0">
					      			<thead>
					      				<tr>				      					
					      					<th>名称</th>
					      					<th>单价</th>
					      					<th>购买数量</th>		
					      					<th>实际支付</th>
					      					<th>{{refundType==1?'累计请假':'补交天数'}}</th>
					      					<th>{{refundType==1?'累计应退':'累计应补'}}</th>
					      					<th>{{refundType==1?'应退费':'应补交'}}</th>	
					      					<th>{{refundType==1?'实际退费':'实际补交'}}</th>
					      					<th v-if="refundType==1">调整原因</th>	
					      				</tr>				      				
					      			</thead>
					      			<tbody  v-if="parentData.mealslist.length>0">
					      				<tr v-for="li in parentData.mealslist" :key="li.studentMealsId">				      					
					      					<td align="center">{{li.name}}</td>
					      					<td align="center">￥{{li.salesPrice}}</td>
					      					<td align="center">x{{li.times}}</td>
					      					<td align="center">￥{{li.realMoney}}</td>
					      					<td align="center">
					      						{{Math.abs(li.leaveDays)}}<br/>
					      						<a v-if="li.leaveDays!=0" href="javascript:void(0);" @click="ViewAttendance(li)">用餐记录</a>
					      					</td>
					      					<td align="center">￥{{Math.abs(li.refundMoney)}}</td>
					      					<td align="center">￥{{Math.abs(li.refundMoney)}}</td>
					      					<td align="center">
												  ￥
												  <el-input-number v-if="refundType==1" v-model="li.realrefundmoney" :precision="2" @change="changeRealMoney(li)" style="width:1rem;"
												 :step="1" :min="0" :max="Math.abs(li.refundMoney)" :controls="false"></el-input-number>
												 <span v-else>{{Math.abs(li.refundMoney)}}</span>
											</td>
					      					<td v-if="refundType==1" align="center">
					      						<div :title="li.reason" style="max-width:0.8rem; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">
					      				    		{{li.reason}}									    		
					      				    	</div>	
					      				    	<el-popover
													    placement="bottom"													 									   
													    trigger="click"
													    >
													    <div class="popover-reason">
													    	<el-input  type="textarea" :rows="2"  v-model="li.reason" style="width:2rem;" placeholder="请输入修改价格原因"></el-input>
													    </div>
													   <i  slot="reference" style="cursor: pointer;" class="el-icon-edit"></i>
  												</el-popover>
					      					</td>
					      				</tr>	      				
					      			</tbody>
					      			<tbody  v-else>
						      				<tr>
						      					<td colspan="11" align="center">暂无数据</td>
						      				</tr>
						      		</tbody>
				      		    </table>
					      	</div>
						</div>
					</section>
					<footer>
				    	<div class="total-box">
							<span v-if="refundType==1">已选餐费，总计退费：￥{{totalRefundMoney}}</span>
							<span v-else>已选餐费，总计补交：￥{{totalRefundMoney}}</span>
				    	</div>
			    	</footer>
				</div>
	    	    <div v-if="refundType==1" class="content-box">
	    	    	<div class="content-li">
	    	    		<span>实际退费：</span>
	    	    		<el-input style="width:2rem;font-size:0.16rem;" disabled v-model="totalRefundMoney" placeholder="实际退费"></el-input>
	    	    	</div>
	    	    	<div class="content-li">
	    	    		<span>退费原因：</span>
	    	    		<el-input  type="textarea" style="margin-top:0.1rem;font-size:0.16rem;" :rows="4" v-model="refundParam.refundreason" placeholder="退费原因"></el-input>
	    	    	</div>
	    	    	<div class="content-li">
	    	    		<span necessary="true">退款方式：</span>
	    	    		<el-radio-group v-model="refundParam.refundmethod">
						    <el-radio disabled label="100"><span style="font-size:0.16rem;">原路返回</span></el-radio>
						    <el-radio :disabled="refundParam.refundmethod==100" label="1"><span style="font-size:0.16rem;">现金</span></el-radio>
						    <el-radio :disabled="refundParam.refundmethod==100" label="2"><span style="font-size:0.16rem;">银行转账</span></el-radio>
							<el-radio :disabled="refundParam.refundmethod==100" label="5"><span style="font-size:0.16rem;">POS机</span></el-radio>
  						</el-radio-group>
	    	    	</div>
	    	    	<div class="content-li">
	    	    		<span necessary="true">收款人信息：</span>
	    	    		<el-input style="width:2rem;font-size:0.16rem;" v-model="refundParam.payee" placeholder="收款人姓名"></el-input>
	    	    		<el-input style="width:2rem;font-size:0.16rem;" v-model="refundParam.payeephone" placeholder="收款人号码"></el-input>
	    	    	</div>
	    	    </div>
				<div v-else class="content-box">
	    	    	<!-- <div class="content-li">
	    	    		<span>实际补交：</span>
	    	    		<el-input style="width:2rem;font-size:0.16rem;" disabled v-model="totalRefundMoney" placeholder="实际补交"></el-input>
	    	    	</div> -->
	    	    	<div class="content-li box-pay">
	    	    		<span style="display: block;margin: 0.16rem 0;width: 100%;font-weight: bold;">支付方式：</span>
	    	    		<!-- <el-radio-group v-model="refundParam.refundmethod">
						    <el-radio disabled label="100"><span style="font-size:0.16rem;">原路返回</span></el-radio>
						    <el-radio :disabled="refundParam.refundmethod==100" label="1"><span style="font-size:0.16rem;">现金</span></el-radio>
						    <el-radio :disabled="refundParam.refundmethod==100" label="2"><span style="font-size:0.16rem;">银行转账</span></el-radio>
							<el-radio :disabled="refundParam.refundmethod==100" label="5"><span style="font-size:0.16rem;">POS机</span></el-radio>
  						</el-radio-group> -->
						<el-radio-group v-model="payParam.payMode">
							<el-radio v-for="item in pay_mode" :key="item.value" :label="item.value">
								<span style="font-size:0.16rem;">{{item.name}}</span>
							</el-radio>
						</el-radio-group>
	    	    	</div>
	    	    	<div class="content-li">
	    	    		<span style="display: block;margin: 0.16rem 0;width: 100%;font-weight: bold;">关联信息：</span>
						<div style="margin-bottom: 0.1rem;">
							<span :necessary="!payParam.orderChecked" style="display: inline-block;width: 1rem;text-align: right;margin-right: 0.08rem;">收据单号</span>
							<el-input style="width:2rem;font-size:0.16rem;" :disabled="payParam.orderChecked"
							 v-model="refundParam.orderNo" placeholder="请输入收据"></el-input>
							<el-checkbox v-model="payParam.orderChecked"><span style="font-size:0.16rem;">无收据</span></el-checkbox>
						</div>
	    	    		
						<div>
							<span style="display: inline-block;width: 1rem;text-align: right;margin-right: 0.08rem;">备注</span>
							<el-input style="width:2rem;font-size:0.16rem;" v-model="payParam.remark" placeholder="请输入备注"></el-input>
						</div>
	    	    		
	    	    	</div>
	    	    </div>
	    		<div v-if="refundType==1" class="footer">
					<div class="btnCancel" @click="btnPre">上一步</div>
					<div style="width:0.1rem;"></div>
					<div class="btnOk" @click="btnOkRefund">确定退费</div>
		      	</div>
				<div v-else class="footer">
					<div class="btnCancel" @click="btnPre">上一步</div>
					<div style="width:0.1rem;"></div>
					<div class="btnOk" @click="btnOkPay">确定补交</div>
		      	</div>
	    	</el-dialog>
	    	
	    	
	    	<!--学员考勤-->
			<attendance ref="attendance"></attendance>
	    
	    </div>
	
</template>

<script>
	let vm;
	import attendance from "./attendance"; //学员考勤
	export default{
		components:{attendance},
		data(){
			return {
				/**退费类型：1-正常退费；2-需补交金额 */
				refundType:1,
				pay_mode:[],
				/**补交参数 */
				payParam:{
					payMode:1,
					orderChecked:false,
					orderNo:'',
					remark:''
				},
				parentData:{
					show:false,
					modalclose:false,
					student:null,
					mealslist:[],
					parentObj:null
				},
				refundParam:{
					actualrefund:'150',
					refundreason:'',
					refundmethod:'2',
					payee:'',
					payeephone:''
				}
			}
		},
		methods:{
			/**
			 * 数据初始化
			 */
			init(data,student){	
				
			 vm.parentData.student = student;	
			 vm.parentData.mealslist = data.map(function(row){
			 				 	
				vm.$set(row,"realrefundmoney",row.refundMoney);//新增对象属性
				vm.$set(row,"reason","");//新增对象属性
				if(row.payMode==3||row.payMode==4){
					vm.refundParam.refundmethod='100';
				}
				vm.refundType=1;
				if(row.leaveDays<0){
					vm.refundType=2;
				}
			 	return row;
			 });
			 vm.parentData.show = true;
			 vm.parentData.parentObj = vm.parent(student);
			 vm.refundParam.payee = vm.parentData.parentObj.parentName;
			 vm.refundParam.payeephone= vm.parentData.parentObj.phone;			 
			},
			/**
			 * 学员亲属对象
			 */
			parent(obj){
				
				let parentObj = (obj.studentParentEntityList&&obj.studentParentEntityList.length>0)?obj.studentParentEntityList[0]:{};
				
				return parentObj;
			},
			/**
			 * 改变价格
			 */
			changeRealMoney(li){
				
				// if(li.realrefundmoney>li.refundMoney){
				// 	li.realrefundmoney = li.refundMoney;
				// }
			},
			/**
			 *确定退费
			 */
			btnOkRefund(){
				//debugger
				if(!this.refundParam.payee){
					this.$message({
						type:'warning',
						message:'请输入收款人姓名！'
					});
					return;
				}
				if(!tool.judge('name',this.refundParam.payee)){
					this.$message({
						type:'warning',
						message:'请输入正确的姓名！'
					});
					return;
				}
				if(!this.refundParam.payeephone){
					this.$message({
						type:'warning',
						message:'请输入收款人手机号！'
					});
					return;
				}
				if(!tool.judge('phone',this.refundParam.payeephone)){
					this.$message({
						type:'warning',
						message:'请输入正确的手机号！'
					});
					return;
				}
				
				let refundlist = vm.parentData.mealslist.map(function(row){
					return{
						studentMealsId:row.studentMealsId,
						mealsNum:row.times,
						realMoney:row.realrefundmoney,
						payableMoney:row.refundMoney,
						modifyRealMoneyReason:row.reason,
						leaveDays:row.leaveDays,
					}
				});
				let param = {
					studentId:vm.parentData.student.studentId,
					orderNo:'',
					refundMode:4,
					refundTime:'',
					payeeName:vm.refundParam.payee,
					payeeTel:vm.refundParam.payeephone,
					payMode:vm.refundParam.refundmethod,
					relMoney:vm.totalRefundMoney,
					orderTime:'',
					remark:vm.refundParam.refundreason,
					orderRefundMealsEntityList:refundlist					
				};
				// debugger
				api.refund(param).then(function(data){										
					if(data.resultCode==2000){
						vm.$parent.cleardata();
						vm.$message({
				            message: '退费申请提交成功',
				            type: 'success'
						});
						vm.parentData.show = false;
					}
					else{
						vm.$message({
				            message: data.message||'操作失败！',
				            type: 'warning'
						});
					}
				})
			},
			/**确定补交 */
			btnOkPay(){

				if(!this.payParam.orderChecked&&!this.payParam.orderNo){
					this.$message({
						type:'warning',
						message:'请输入收据号！'
					});
					return;
				}
			},
			/**
			 * 上一步
			 */
			btnPre(){
				vm.$emit('callback');
				vm.parentData.show = false;
			},
			/**
			 * 关闭弹框
			 */
			closeDialog(){
				vm.parentData.show = false;
				vm.$parent.cleardata();
				
			},
			/**
			 * 查看学员考勤
			 */
			ViewAttendance(li){
				//起止时间
				let m=new Date(li.useTime.replace(/-/g,'/'));
				m.setMonth(m.getMonth() + 1, 0);
				let startTime = tool.DateToString(m, "yyyy-MM-01 00:00:00");
				let endTime = tool.DateToString(m, "yyyy-MM-dd 23:59:59");

				let param={
					mealsType:vm.mealsType,
					mealsId:li.mealsId, 
					studentId:vm.parentData.student.studentId,
					studentName:vm.parentData.student.realName,
					startTime:startTime,
					endTime:endTime
				};
				vm.$refs.attendance.init(param);
			},
			
		},
		computed:{
			
			totalRefundMoney:{
				
				get:function(){
					let list = vm.parentData.mealslist;
					let num = 0;
					console.log(list)
					for(let i=0;i<list.length;i++){
						
						num+= Number(list[i].realrefundmoney);
					}
					return Math.abs(num);
				},
				set:function(val){
					console.log(val)
				}
			}
		},
		mounted(){
			vm = this;
			this.pay_mode=tool.getDictNameByValue(-100,'pay_mode');
		}
	}
	
</script>

<style lang="scss">
	
	.mealrefund_confirm{
		.mealfeeconfigrefund{
			width:10rem !important;;
			border-radius: .1rem !important;;	
			margin-top:8vh !important;
		}
		.mealfeeconfigDialog {
	        z-index: 29 !important;
	        top: 0.81rem !important;
	        left: 2.1rem !important;
	        background-color:rgba(0,0,0,0.5) !important;
	        
	        .el-dialog__header{
				padding: 0px;
			}
			.el-dialog__body{
				padding: 0px !important;
			}	
			.el-dialog__footer{
				padding: .3rem;
				.footer-btn{
					width:100%;
					text-align: center;									
			   }
			}
			.title{
			  	width:100%;
				height: 0.6rem;
				padding: 0.2rem 0.3rem;
				font-size: 0.2rem;
				font-weight: bold;
			}
			.student-info{
				width:100%;
				height: 0.6rem;
				padding: 0.2rem 0.3rem;
				font-size: 0.16rem;			
			} 
			.content-box{
				width:100%;
				height: auto;
				padding: 0.2rem 0.3rem;
				.content-li{
					height: auto;
					width:100%;
					font-size: 0.16rem;
					padding:0.1rem 0rem;
					.el-input__inner{
				        border-radius: 0.05rem;			      
				        color: #666666;
				        height: 0.36rem !important;
				        line-height: 0.36rem;
    				}
				}
				section > .meallist-box{
					.el-input__inner{
				        border-radius: 0.05rem;			      
				        color: #666666;
				        height: 0.36rem !important;
				        line-height: 0.36rem;
    				}
					.mealfee-list{
						height: auto;
						width: 100%;
						border:1px solid #F0F0F0;
						border-radius: 0.08rem;
						table{
							border: none;
							
						}
					}				
				}
				footer > .total-box{
					width: 100%;
					height: 0.4rem;
					text-align: right;
					line-height: 0.4rem;
					font-size: 0.16rem;
				}
			}
			.footer{
				width:100%;
				height: auto;
				display: inline-flex;
				justify-content: center;
				padding:0.2rem 0.3rem;
				.btnOk{
		            width:1.6rem;
		            height: 0.4rem;
		            line-height: 0.4rem;
		            text-align: center;
		            font-size: 0.16rem;
		            background: #3885F8;
		            color: #FFFFFF;
		            border-radius: 0.1rem;
		            cursor: pointer;
	        	}
		        .btnOk:hover{
		            background: rgba(56, 133, 248, 0.8);
		        }
		        .btnCancel{
		            width:1.6rem;
		            height: 0.4rem;
		            line-height: 0.4rem;
		            text-align: center;
		            font-size: 0.16rem;
		            background: #FFFFFF;
		            border-radius: 0.1rem;
		            color: #333333;        
		            border: 0.01rem solid #C0C4CC;
		            cursor: pointer;
		          
		        }
		        .btnCancel:hover{
		            background: rgba(56,133,248,0.1)
		        }
			}
			
		}
		// 必须图标
		span[necessary="true"]::before {
			content: "*";
			color: #f56c6c;
			margin-right: 4px;
		}
	}	
		
</style>